@import '~ant-design-vue/es/style/themes/default.less';

html,
body,
#app, #root {
  height: 100%;
}

.colorWeak {
  filter: invert(80%);
}
.ant-layout {
  background-color: #f9f9f9;
}
.ant-layout.layout-basic {
  height: 100vh;
  min-height: 100vh;
}

canvas {
  display: block;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 数据列表 样式
.table-alert {
  margin-bottom: 16px;
}
// 数据列表 操作
.table-operator {
  margin-bottom: 18px;

  button {
    margin-right: 8px;
  }
}
// 数据列表 搜索条件
.table-page-search-wrapper {

  .ant-form-inline {
    .ant-form-item {
      display: flex;
      margin-bottom: 24px;
      margin-right: 0;

      .ant-form-item-control-wrapper {
        flex: 1 1;
        display: inline-block;
        vertical-align: middle;
      }

      > .ant-form-item-label {
        line-height: 32px;
        padding-right: 8px;
        width: auto;
      }
      .ant-form-item-control {
        height: 32px;
        line-height: 32px;
      }
    }
  }

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
}

@media (max-width: @screen-xs) {
  .ant-table {
    width: 100%;
    overflow-x: auto;
    &-thead > tr,
    &-tbody > tr {
      > th,
      > td {
        white-space: pre;
        > span {
          display: block;
        }
      }
    }
  }
}
//表格上方操作条
.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}
// 详情页底部按钮
.bottom-control {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 4px 4px;
  z-index: 100;
}
.ant-drawer-body {
  padding: 24px 24px 50px 24px;
  font-size: 14px;
  line-height: 1.5;
}

.ant-pro-sider-menu-logo {
  padding: 0 12px;
  text-align: center;
  h1 {
    font-size: 15px;
  }
}

body::-webkit-scrollbar{ // 滚动条宽度（竖直滚动条宽度有效，横向滚动条高度有效）
  width: 8px;
  height: 8px;
}
body::-webkit-scrollbar-track{ // 滚动槽
  background: #e5e5e5;
}
body::-webkit-scrollbar-thumb{ // 滑块
  background: #aaaaaa;
  border-radius: 3px;
}

.ui-card {
  margin-top: 20px;
}
.ant-card-body {
  padding: 16px;
}

.ui-form-content {
  .ui-form-item {
    margin-bottom: 14px !important;
  }
}

.resize-table-th {
  position: relative;
  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: e-resize;
    touch-action: none;
    position: absolute;
    transform: none !important;
    &:last-child {
      right: 0;
      width: 5px !important;
    }
  }
}
.ant-table.ant-table-small .ant-table-thead > tr > th.resize-table-th{
  background: #fafafa !important;
}

.ant-form {
  .ant-form-item {

    .ant-input-disabled {
      color: rgba(0, 0, 0, .65);
    }

    .ant-input-number-disabled .ant-input-number-input {
      color: rgba(0, 0, 0, .65);
    }
    .ant-radio-disabled + span {
      color: rgba(0, 0, 0, .65);
    }

    /*修复textarea disable的时候，数字底色问题*/
    .ant-textarea-limit .limit{
      background: none;
    }

    .ant-select-disabled{
      color: rgba(0, 0, 0, .65);
    }
  }
}

.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.ant-upload-list-picture-card .ant-upload-list-item-info::before{
  left: 0;
}

.ant-tag{
  margin-right: 0;
}

.ant-table-small > .ant-table-content > .ant-table-body{
  margin-left: 0;
  margin-right: 0;
}

.ant-pro-sider-menu-logo {
  padding-left: 12px !important;
}

/***********************************************************************************************/ 

// 分页样式
.paging{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

// 普通添加的表单
.add-form {
  .ant-form-item{
    display: flex;
    margin-bottom: 15px !important;
  }
  .ant-form-item-label{
    width: 132px;
  }
  .ant-input,
  .ant-select,
  .ant-input-number,
  .ant-calendar-picker{
    width: 500px;
  }
  .f1 .ant-form-item-control-wrapper{
    flex: 1;
  }
  &.w360{
    .ant-input,
    .ant-select,
    .ant-input-number,
    .ant-calendar-picker{
      width: 360px;
    }
  }
}

.add-form-coms{
  .ant-form-item{
    margin-bottom: 10px !important;
  }
}

.add-form-no{
  .ant-input,
  .ant-select,
  .ant-input-number,
  .ant-calendar-picker{
    width: 100%;
  }
  .ant-form-item-control-wrapper{
    flex: 1;
  }
}

.yd-form-vertical {
  .ant-input,
  .ant-select,
  .ant-input-number,
  .ant-calendar-picker{
    width: 100%;
  }
}

// 重置表单项的下边距
.noMar{
  margin-bottom: 0 !important;
}
.add-form {
  .noMar{
    margin-bottom: 0 !important;
  }
}

// 一些全局的预置颜色
.green{
  color: #71b604 !important;
}
.orange{
  color: #f9b524 !important;
}
.blue{
  color: #02A7F0 !important;
}
.red{
  color: #f5222d !important;
}
.gray{
  color: #999999 !important;
}

// 底部提交按钮
.fixed-btns{
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  height: 60px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding-left: 60px;
  box-sizing: border-box;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  button{
    margin: 10px 20px;
    width: 150px;
  }
}
.btm-mar{
  margin-bottom: 62px !important;
}

// 原生文件上传的类
.file-absolute{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  min-width: auto;
  z-index: 50;
}

// 时间选择器插槽的确定与取消按钮
.addon{
  span{
    font-size: 12px;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 4px 5px;
    line-height: 1;
  }
  .confirm{
    color: #fff;
    background-color: #40a9ff;
    border-color: #40a9ff;
  }
}

// 进度条底色调整
.progress{
  .ant-progress-inner {
    background-color: #dedede;
  }
}

// 前面带上圆点的样式
.yd-status{
  display: flex;
  align-items: center;
  justify-content: center;
  &::before{
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: #ccc;
    color: rgba(0, 0, 0, 0.65);
  }
  &.sgray::before{
    background-color: #bfbfbf;
  }
  &.syellow::before{
    background-color: #ffbf00;
  }
  &.sblue::before{
    background-color: #1890ff;
  }
  &.sgreen::before{
    background-color: #71b604;
  }
}

// 菜单的气泡统计
.menu-dot{
  margin-left: 6px;
  border-radius: 50%;
  color: #fff;
  background-color: #f59a23;
  width: fit-content;
  height: fit-content;
  line-height: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  color: #fff;
  font-weight: 400;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
}

// 一个小的提示语
.yd-tip{
  line-height: 1.2;
  font-size: 12px;
  color: #999;
}


// 重置a-card的底部内边距
.ant-card.padBtm{
  & > .ant-card-body{
    padding-bottom: 0 !important;
  }
}

// 有底部栏的页面边距控制
.page-btm{
  margin-bottom: 62px !important;
}

// 编辑器
.editor{
  max-width: 920px;
  height: 450px;
}

// 点击手势
.cursor {
  cursor: pointer !important;
}